<template>
    <div class="container-xl mx-auto flex-h-center">
        <div class="text-center">
            <h1>{{ title }}</h1>
            <p>首页</p>
            <p>
                <el-button @click="showAlert">Alert</el-button>
                <el-button @click="showSuccess">Success</el-button>
                <el-button @click="showError">Error</el-button>
                <el-button @click="showConfirm">Confirm</el-button>
                <el-button @click="showToast">Toast</el-button>
                <el-button @click="showLoading">Loading</el-button>
                <el-button @click="showOpen">Open</el-button>
            </p>
        </div>
    </div>
</template>

<script>
    import {app, tnx} from '../app.js';
    import info from './info.vue';

    export default {
        data() {
            return {
                title: import.meta.env.VITE_TITLE,
                uploadBaseUrl: app.rpc.apps?.fss,
            };
        },
        created() {
            if (app.rpc.getDefaultBaseUrl() && !this.uploadBaseUrl) {
                const vm = this;
                app.rpc.loadConfig().then(context => {
                    vm.uploadBaseUrl = context.apps?.fss;
                });
            }
        },
        methods: {
            showAlert() {
                tnx.alert('Hello World').then(() => {
                    console.log('alert closed');
                });
            },
            showSuccess() {
                tnx.success('提交成功，请等待组织管理员为你分配角色，获得组织角色后方可使用组织功能。').then(() => {
                    console.log('success closed');
                });
            },
            showError() {
                tnx.error('Hello World').then(() => {
                    console.log('error closed');
                });
            },
            showConfirm() {
                tnx.confirm('Hello World').then((yes) => {
                    console.log('confirm result:', yes);
                });
            },
            showToast() {
                tnx.toast('操作成功', 2000).then(() => {
                    console.log('toast closed');
                });
            },
            showLoading() {
                tnx.showLoading('加载中');
                setTimeout(() => {
                    tnx.closeLoading();
                }, 2000);
            },
            showOpen() {
                tnx.open(info, {
                    param: '- from params',
                    opener: this,
                });
            },
            uploadOk() {
                this.$refs.headImageUpload.getStorageUrls().then((storageUrls) => {
                    if (storageUrls.length) {
                        tnx.success(storageUrls.join('\n'));
                    }
                }).catch((file) => {
                    tnx.alert('文件"' + file.name + '"还未上传完毕，请稍候');
                });
            }
        }
    }
</script>
